f<template>
  <div class="add-rule-detail">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/company-settings/add-rule/home">返回</BreadcrumbItem>
        <BreadcrumbItem>添加员工</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <div class="detail-tabs">
      <Tabs type="card">
        <TabPane label="个人信息">
          <div class="tablew-wrap">
            <Table
              width="100%"
              :columns="columns1"
              draggable
              :data="personInfo"
              class="table4"
              @on-drag-drop="droped"
            ></Table>
          </div>
        </TabPane>
        <TabPane label="入职信息">
          <div class="tablew-wrap">
            <Table
              width="100%"
              :columns="columns1"
              draggable
              :data="workInfo"
              class="table4"
              @on-drag-drop="droped2"
            ></Table>
          </div>
        </TabPane>
      </Tabs>
    </div>

    <div class="bottom-btns-wrap">
      <div class="btns">
        <Button class="save-btn-green" :loading="saving" @click="save">{{saveBtnText}}</Button>
      </div>
    </div>
  </div>
</template>
<script>
import { personnel as api } from "@/apis";
import http from "@/utils/http";

export default {
  data() {
    return {
      saveBtnText: "保存",
      saving: false,
      columns1: [
        {
          title: "字段名称",
          key: "cloumn_name"
        },
        {
          title: "是否显示",
          render: (h, params) => {
            const row = params.row;
            const value = row.is_show == 1 ? true : false;

            return h(
              "Checkbox",
              {
                props: {
                  value: value
                },
                on: {
                  "on-change": () => {
                    this.changeShowState(params, row);
                  }
                }
              },
              ""
            );
          }
        },
        {
          title: "是否必填",
          render: (h, params) => {
            const row = params.row;
            const value = row.is_require == 1 ? true : false;

            return h(
              "Checkbox",
              {
                props: {
                  value: value
                },
                on: {
                  "on-change": () => {
                    this.changeRequireState(params, row);
                  }
                }
              },
              ""
            );
          }
        },

        {
          title: " ",
          key: "action",
          width: "120",
          render: (h, params) => {
            return h("Icon", {
              props: {
                type: "md-menu"
              },
              class: "table-d-btn"
            });
          }
        }
      ],
      personInfo: [],
      workInfo: []
    };
  },
  mounted() {
    this.getPersonInfo();
    this.getEntryInfo();
  },
  methods: {
    // 是否显示 点击事件
    changeShowState(e) {
      let row = e.row;
      let index = e.index;
      let state = row.is_show == 1 ? 2 : 1;
      if (row.type == 1) {
        this.personInfo[index].is_show = state;
      } else {
        this.workInfo[index].is_show = state;
      }
    },

    // 是否必填 点击事件
    changeRequireState(e) {
      let row = e.row;
      let index = e.index;
      let state = row.is_require == 1 ? 2 : 1;

      if (row.type == 1) {
        this.personInfo[index].is_require = state;
      } else {
        this.workInfo[index].is_require = state;
      }
    },

    // 拖拽排序
    droped(index1, index2) {
      let d1 = this.personInfo[index1];
      let d2 = this.personInfo[index2];
      this.$set(this.personInfo, index1, d2);
      this.$set(this.personInfo, index2, d1);
    },

    // 表格2
    droped2(index1, index2) {
      let d1 = this.workInfo[index1];
      let d2 = this.workInfo[index2];
      this.$set(this.workInfo, index1, d2);
      this.$set(this.workInfo, index2, d1);
    },

    // 获取个人信息列表
    getPersonInfo() {
      this.$store
        .dispatch("personnel/personinfo", this.registerForm)
        .then(res => {
          console.log(res);
          if (res.e == "9999") {
            this.personInfo = res.data;
          }
        });
    },

    // 获取入职信息列表
    getEntryInfo() {
      this.$store
        .dispatch("personnel/entryinfo", this.registerForm)
        .then(res => {
          this.workInfo = res.data;
        });
    },

    save() {
      this.saveBtnText = "保存中...";
      this.saving = true;
      let p1 = http
        .post(api.editpersoninfo, { data: { list: this.personInfo } })
        .then(res => {
          console.log("个人信息，提交成功");
        })
        .catch(error => {
          console.log("个人信息，提交失败,", error);
        });

      let p2 = http
        .post(api.editentryinfo, { data: { list: this.workInfo } })
        .then(res => {
          console.log("入职信息，提交成功");
        })
        .catch(error => {
          console.log("入职信息，提交失败,", error);
        });

      Promise.all([p1, p2])
        .then(result => {
          this.$Message.success("保存成功!");
          this.saveBtnText = "保存";
          this.saving = false;
        })
        .catch(error => {
          console.log(error);
          this.saveBtnText = "保存";
          this.saving = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>